<template>
    <div class="home-page">
        <!-- <div class="search-box">
            <van-search placeholder="请输入搜索关键词" v-model="searchValue" />
        </div> -->
        <van-swipe :autoplay="3000" class="banner">
            <van-swipe-item v-for="(item, index) in bannerImg" :key="index">
                <img v-lazy="item.img_url" />
                <div class="banner_text" v-if="item.title">{{item.title}}</div>
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="4" :border="false" class="tabs_box">
            <!-- <van-grid-item>
                <van-image src="/static/lib/img/home_learn.png" height="28" width="28"  /> 
                <div class="text-center tabs_text">学习记录</div>
            </van-grid-item>  -->
            <van-grid-item @click="tabsJumpPage('goodsList',2)">
                <van-image src="/static/lib/img/home_welfare.png" height="28" width="28"  /> 
                <div class="text-center tabs_text">公益讲堂</div>
            </van-grid-item> 
            <van-grid-item @click="tabsJumpPage('goodsList',0)">
                <van-image src="/static/lib/img/home_courses.png" height="28" width="28"  /> 
                <div class="text-center tabs_text">全部课堂</div>
            </van-grid-item>
            <van-grid-item @click="tabsJumpPage('goodsList',1)">
                <van-image src="/static/lib/img/home_vip.png" height="28" width="28"  /> 
                <div class="text-center tabs_text">VIP专区</div>
            </van-grid-item> 
            <van-grid-item @click="tabsJumpPage('cityPostDetail')">
                <van-image src="/static/lib/img/home_station.png
                " height="28" width="28"  /> 
                <div class="text-center tabs_text">城市驿站</div>
            </van-grid-item> 
        </van-grid>
        <div class="prd-box" v-if="recommend.length>0">
            <div class="group-title"  @click="tabsJumpPage('goodsList',1)">
                <div class="title-items active">推荐课程</div>
                <div class="title-items">系统专业全面</div>
                <!-- <div class="title-items"></div>
                <div class="title-items"></div> -->
                <van-icon name="arrow" class="float-right" style="margin-top:.08rem"/>
            </div>
            <prd-list :prdList="recommend" ></prd-list>
        </div>
        <div class="prd-box"  v-if="freeData.length>0"  @click="tabsJumpPage('goodsList',2)">
            <div class="group-title">
                <div class="title-items active">公益讲堂</div>
                <div class="title-items">免费公益课程</div> 
                <van-icon name="arrow" class="float-right" style="margin-top:.08rem"/>
            </div>
            <prd-list :prdList="freeData" ></prd-list>
        </div>
    </div>
</template>

<script>
import * as api from './../../api/api'
export default {
    data(){
        return{
            searchValue:'',
            bannerImg: [], //轮播图  
            recommend:[], //推荐课程
            freeData:[]
        }
    },
    mounted(){
        this.getBannerData();
        this.getSubjectTop();
        this.getSubjectFree();
    },
    methods:{
        //banner
        getBannerData(){
            let vm = this;
            api.fetchBannerList().then(res=>{
                if(res.data.code==200){ 
                    vm.bannerImg=res.data.data?res.data.data:[];
                }
            })
        },
        //推荐课程
        getSubjectTop(){
            let vm = this;
            api.fetchSubjectTop().then(res=>{
                if(res.data.code==200){ 
                    vm.recommend=res.data.data?res.data.data:[]; 
                }
            })
        }, 
        //免费课程
        getSubjectFree(){
            let vm = this;
            api.fetchSubjectFree().then(res=>{
                if(res.data.code==200){ 
                    vm.freeData=res.data.data?res.data.data:[]; 
                }
            })
        }, 
        tabsJumpPage(url,type){
            this.$router.push({name:url,query:{listType:type}})
        },
    }, 
    components:{ 

    }

}
</script>


<style scoped lang="scss">
.home-page{
    // padding-top:54px; 
    padding-bottom:54px; 
    height:auto;
    .search-box{
        width:100%;
        position: fixed;
        top:0;
        z-index: 100;
    }
    .banner{
        height:4.8rem;
        width:100%;
        position: relative;
        img{
            width:100%;
            height:100%;
        }
        .banner_text{
            position:absolute; 
            bottom:0;
            left:0;
            width:100%; 
            padding:.213333rem;
            background:rgba(0,0,0,.5);
            color:#fff;
            font-size: .346667rem;
        }   
    }
    .tabs_box{
        .tabs_text{
            margin-top:8px;
            color: #646566;
            font-size: 12px;
            word-wrap: break-word;
        }
    }
    .prd-box{
        width:100%;
        background:#fff;
        margin-top:.133333rem;
        .group-title{
            width:100%;
            padding:.266667rem .266667rem;
            &:active{
                background:#efefef;
            }
            .title-items{
                display: inline-block;
                font-size:.36rem; 
            }
            .active{
                font-size:.426667rem;
                font-weight: bold; 
            }
        }
    }
     
}

</style>
